const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve (dir) {
  return path.join(__dirname, dir)
}
const title = defaultSettings.title || 'vue Admin Template' // page title
// 设置前端项目启动端口
const port = process.env.port || process.env.npm_config_port || 8088 // dev port
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  transpileDependencies: true,
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  devServer: {
    port: port,
    open: true,
    client: {
      overlay: false // 编译错误时，取消全屏覆盖（建议关掉）
    },
    // 这里配置前端代理
    proxy: {
      '/dev-api': { // 匹配所有一 /dev-api开头的请求路径
        target: 'http://127.0.0.1:8089', // 目标服务器地址
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径，去掉路径中开头的 /dev-api
          '^/dev-api': '/component/management/back/api'
        }
      }
      // ... 可以配置多个代理服务器
    }
  },
  configureWebpack: {
    name: title,
    resolve: {
      alias: {
        '@': resolve('src')
      },
      fallback: {
        path: require.resolve('path-browserify')
      }
    }
  },
  chainWebpack: config => {
    // 清除默认对所有svg文件的处理规则
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();

    // 对普通svg文件使用file-loader
    svgRule
      .test(/\.svg$/)
      .exclude.add(resolve('src/icons'))
      .end()
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'img/[name].[hash:8].[ext]'
      });

    // 对 src/icons 目录下的svg文件使用 svg-sprite-loader
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      });
  }
})
